<script lang="ts" setup>
  import { useBScroll, useField, useState, useListDatas } from '@/hooks';

  import FoodList from './FoodList/index.vue';
  import ViewList from './ViewList/index.vue';
  import HotelList from './HotelList/index.vue';
  import KtvList from './KtvList/index.vue';
  import MassageList from './MassageList/index.vue';

  defineOptions({
    name: 'ListScrollWrapper'
  });
  const field = useField();

  const { wrapperRef } = useBScroll();
  const [errorShow, setErrorShow] = useState(false);
  const [loadingShow, setLoadingShow] = useState(false);
  const listDatas = useListDatas(setLoadingShow, setErrorShow);
</script>

<template>
  <div class="scroll-wrapper" ref="wrapperRef">
    <div class="scroll-conetent">
      <template v-if="!errorShow">
        <loading :loading="loadingShow" />

        <food-list v-if="field === 'food'" :foodDatas="listDatas[field] ?? []" />
        <view-list v-if="field === 'view'" :viewDatas="listDatas[field] ?? []" />
        <hotel-list v-if="field === 'hotel'" :hotelDatas="listDatas[field] ?? []" />
        <ktv-list v-if="field === 'ktv'" :ktvDatas="listDatas[field] ?? []" />
        <massage-list v-if="field === 'massage'" :massageDatas="listDatas[field] ?? []" />
      </template>
    </div>
    <bad-network :error-show="errorShow" />
  </div>
</template>
